<template>
	<view class="__svg" :class="{'action': show}" id="__svg-photo" :style="{width: size + 'px',height: size + 'px'}">
	</view>
	
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			size: {
				type: String,
				default: 'auto'
			},
		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>
<script module="svgs" lang="renderjs">
	export default {
		mounted() {
			if (typeof window.svgs === 'function') {
				this.initSvgs()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/svg.js'
				script.onload = this.initsvg.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initsvg: function(e) {
				var svg = SVG().addTo('#__svg-photo');
				svg.attr({
					viewBox: '0 0 1024 1024',
				});
				svg.path(
					'M910.4 843.8H174.6c-27.4 0-49.7-22.3-49.7-49.7V298.2c0-27.4 22.3-49.7 49.7-49.7h735.8c27.4 0 49.7 22.3 49.7 49.7v495.9c0 27.4-22.3 49.7-49.7 49.7z'
				).attr({
					class: 'photo1',
				});
				var svg_g1 = svg.group().attr({
					class: 'photo_g1'
				})
				svg_g1.path(
					'M272.1 193.8H118.7c-22.8 0-41.2 18.5-41.2 41.2v512.7c0 22.8 18.5 41.2 41.2 41.2h752.7c22.8 0 41.2-18.5 41.2-41.2V235c0-22.8-18.5-41.2-41.2-41.2H272.1z'
				).attr({
					class: 'photo2',
				});
				svg_g1.path(
					'M871.4 802.5H118.7c-30.2 0-54.8-24.6-54.8-54.8V235c0-30.2 24.6-54.8 54.8-54.8h752.7c30.2 0 54.8 24.6 54.8 54.8v512.7c0 30.3-24.6 54.8-54.8 54.8zM118.7 207.3c-15.3 0-27.7 12.4-27.7 27.7v512.7c0 15.3 12.4 27.7 27.7 27.7h752.7c15.3 0 27.7-12.4 27.7-27.7V235c0-15.3-12.4-27.7-27.7-27.7H118.7z'
				).attr({
					class: 'photo3',
				});
				svg_g1.path(
					'M302.8 246.7H170.5c-19.6 0-35.6 13.6-35.6 30.3v376.5c0 16.7 15.9 30.3 35.6 30.3h649.1c19.6 0 35.6-13.6 35.6-30.3V277c0-16.7-15.9-30.3-35.6-30.3H302.8z'
				).attr({
					class: 'photo4',
				});
				svg_g1.path(
					'M430.8 683.8L230.3 483.3 135 578.6v105.2z'
				).attr({
					class: 'photo5',
				});
				svg_g1.path(
					'M275.6 394.3a98.8 98.8 0 1 0 197.6 0 98.8 98.8 0 1 0-197.6 0z'
				).attr({
					class: 'photo6',
				});
				svg_g1.path(
					'M855.1 630L551.5 326.4 194.3 683.7h660.8z'
				).attr({
					class: 'photo7',
				});
				svg_g1.path(
					'M855.1 521.8l-83-83-245 245h328z'
				).attr({
					class: 'photo8',
				});
				svg_g1.path(
					'M709.9 743.8h-33.1c-0.8 0-1.5-0.7-1.5-1.5v-33.1c0-0.8 0.7-1.5 1.5-1.5h33.1c0.8 0 1.5 0.7 1.5 1.5v33.1c0 0.9-0.7 1.5-1.5 1.5z m64.3 0h-33.1c-0.8 0-1.5-0.7-1.5-1.5v-33.1c0-0.8 0.7-1.5 1.5-1.5h33.1c0.8 0 1.5 0.7 1.5 1.5v33.1c0 0.9-0.6 1.5-1.5 1.5z m64.4 0h-33.1c-0.8 0-1.5-0.7-1.5-1.5v-33.1c0-0.8 0.7-1.5 1.5-1.5h33.1c0.8 0 1.5 0.7 1.5 1.5v33.1c0 0.9-0.7 1.5-1.5 1.5z'
				).attr({
					class: 'photo9',
				});
			},
		}
	}
</script>

<style>

</style>
